<template>
	<view>
		<view class="flex justify-between item-center mb-12">
			<text class="text-color-regular fs-16 text-bold">营销功能</text>
		</view>
		<view class="grid-cols-4 gap-12">
			<view v-for="(menu,i) in menus" :key="i" class="flex-col center" @click="onMenuClick(menu)">
				<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
				<text class="text-color-hint fs-12">{{menu.title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const menus = ref([
		{
			title: '订单管理',
			icon: '../../../static/svg/mine/menu-order.svg',
			path: ''
		},
		{
			title: '我的活动',
			icon: '../../../static/svg/mine/menu-activity.svg',
			path: '/pages/my-activity/my-activity'
		},
		{
			title: '商户管理',
			icon: '../../../static/svg/mine/menu-merchant-manage.svg',
			path: ''
		},
		{
			title: '角色管理',
			icon: '../../../static/svg/mine/menu-role.svg',
			path: ''
		},
		{
			title: '火火学院',
			icon: '../../../static/svg/mine/menu-college.svg',
			path: '/center/pages/college/college'
		},
		{
			title: '商户工作',
			icon: '../../../static/svg/mine/menu-merchant-work.svg',
			path: ''
		},
		{
			title: '红包中心',
			icon: '../../../static/svg/mine/menu-red-packet.svg',
			path: ''
		},
		{
			title: '发票管理',
			icon: '../../../static/svg/mine/menu-invoice.svg',
			path: ''
		}
	])
	
	const onMenuClick = (menu) => {
		if (menu && menu.path) {
			uni.navigateTo({
				url: menu.path
			})
		}
	}
</script>

<style lang="scss" scoped>
	.grid-cols-4 {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.gap-12 {
		gap: 12px;
	}
</style>